<template>
	<yd-layout id='live' class=''>
		<header class="header">
			<div class="header_children" v-if='$route.query.kind==1'>
				<img class="header_img" :src="dataObj.title_img" alt="" />
				<div class="time c_size_34_48" v-if='overYg'>
					<div>距开播还剩</div>
					<div >
						<yd-countdown :time="dataObj.time" :callback='timeCallback' timetype="datetime">
							<span >{%d} &nbsp;<i>天</i>&nbsp;&nbsp;</span>
					        <span >{%h} &nbsp;<i>时</i>&nbsp;&nbsp;</span>
					        <span >{%m} &nbsp;<i>分</i>&nbsp;&nbsp;</span>
					        <span >{%s} &nbsp;<i>秒</i></span>
						</yd-countdown>
					</div>
				</div>
			</div>
			<!--:style="contentStyle"-->
			<div class="header_children_100" ref='headerChildrenRef'  v-else >
				<div class="header_children_100_c">
					<div class="mengban"  @click='playVideo' v-show="playBtn" ></div>
					<div class="mengbanimg" v-show="playBtn" :style="mengBanImgStyle"></div>
					<img v-show='playBtn'  @click='playVideo' src="../../assets/playBtn.png" alt="" />
					<div class="h5_player">
						<!--:poster="dataObj.title_img" -->
						<video 
							id="test_video" 
							width="100%" 
							ref='videoRef'
							height="30%" 
							x5-video-orientation="portraint"  
							webkit-playsinline="true" 
							playsinline="" 
							x5-playsinline="" 
							x-webkit-airplay="allow" 
							@pause="pauseVideo"
							@playing='playIngVideo'
							:src="dataObj.url" 
							
							preload="" 
							class="content_video text_left" 
							style="position: 
							inherit;width:100%;">
						</video>
						<!--<video 
							:class="h5VideoFlg?'h5_video':''"
							webkit-airplay="true"  
							@pause="pauseVideo"
							@playing='playIngVideo'
							ref='videoRef'
							:style="contentStyle"
							id="videoID"
							webkit-playsinline="true" 
							playsinline="true"
							x5-video-player-type="h5"
							x5-video-player-fullscreen="false"
							width="100%" 
							height="100"
							preload="auto"  
							:poster="dataObj.title_img" 
							:src="dataObj.url"
						>-->
						</video>
					</div>
				</div>
				
				<!--<div class="cs" v-show="palyOpen">ces</div>-->
			</div>
		</header>
		<div class="content">
			<div class="live_title">
				<div class="c_size_34_48 ">{{dataObj.title}}</div>
				<div v-if="$route.query.kind==1" class="time">直播时间：{{dataObj.liveTime}}</div>
				<div v-else class="time">{{dataObj.member_total}}人观看</div>
			</div>
			<div class="live_teacher">
				<img class="live_teacher_img" :src="dataObj.avatar" alt="" />
				<div class="live_teacher_right">
					<div class="teacher_name c_size_30_42 c_text_ellipsis_1">{{dataObj.nick_name}}</div>
					<span>{{dataObj.summary||'暂无相关介绍'}}</span>
				</div>
			</div>
			<div class="live_detail">
				<div class="title c_size_34_48">直播介绍</div>
				<template v-if="dataObj.detail">
					<div class="c_v_html" v-html="dataObj.detail"></div>
				</template>
				<div v-else class="no_detail" style="margin-top: 1rem;">
					暂无直播介绍
				</div>
			</div>
		</div>
		<div class="c_go_home c_size_30_42" @click="$router.push({name:'index',query:{str:'index'}})">去首页</div>
		<!--输入密码-->
		<yd-popup v-model="showPop" position="center" :close-on-masker='false'>
			<div class="pop_nike_name">
				<div class="title c_size_34_48">该场直播已加密</div>
				<div class="pop_nike_name_input">
					<input placeholder="请输入六位直播密码" oninput="if(value.length>6)value=value.slice(0,6)"  type="text" v-model="passwordNum" />
				</div> 
				<ul class="c_size_34_48">
					<li @click="showPop=false">取消</li>
					<li @click="postPassword()" >确定</li>
				</ul>
			</div>
        </yd-popup>
	</yd-layout>
</template>

<script>
	import {CountDown} from 'vue-ydui/dist/lib.rem/countdown';
	import {Popup} from 'vue-ydui/dist/lib.rem/popup';
	export default{
		components:{
			[CountDown.name]:CountDown,
			[Popup.name]:Popup,
		},
		data(){
			return {
				playBtn:true,
				palyOpen:false,
				h5VideoFlg:false,
				contentStyle:{},
				videoHeight:'',
				dataObj:{},
				mengBanImgStyle:{},
				mineObj:{},
				listObj:{},
				showPop:false,
				passwordNum:'',
				overYg:true,
				kindFlg2:false,
			}
		},
		created() {
			this.getMine()
			
			if(this.$route.query.kind==2){
				this.kindFlg2=true
				this.$root.id = this.$route.query.id
				this.$root.uuid = (parseInt((parseInt(new Date()-0))/1000))+''+(this.$root.userInfo.me.id||0)
				this.$root.submitEvent({
					kind:3,
				})
				this.$store.commit({
					type:'setDataEvent',
					data:{
						kind:3,
						position:0,
						uuid:this.$root.uuid,
						oid:this.$route.query.id,
						uid:this.$root.userInfo&&(JSON.stringify(this.$root.userInfo)!='{}')?this.$root.userInfo.me.id:0
					}
				})
			}
		},
		//销毁实例
		beforeDestroy(){
			
			if(this.kindFlg2){
				this.$root.submitEvent({
					kind:3,
					lastFlg:true
				})
			}
				
		},
		watch: {
			
		},
		computed: {
			
		},
		mounted(){
//			setTimeout(()=>{
//				this.$nextTick(()=>{
//					this.videoHeight = document.getElementById('app').clientHeight+'px'
//					this.contentStyle = {
//						width: '100%',
//							//height: ((contentHight-headerHight-btnHight) / 100 * 2-0.32) + 'rem',
//						height: this.videoHeight,
//					}
//				})
//			},10)
			//预告详情
			this.getTrailer()
			if(this.$route.query.kind==1){
				document.title='直播预告'
			}else{
				document.title='直播回放'
			}
		},
		methods:{
			//预告结束
			timeCallback(){
				this.overYg=false;
			},
			//输入密码
			postPassword(){
				if(this.passwordNum.length==6){
					if(this.passwordNum==this.listObj.password){
						this.showPop=false;
						this.videoPlayFunc()
					}else{
						this.$dialog.toast({
		                    mes: '请输入正确的六位密码',
		                    timeout: 1500
		                });
					}
				}else{
					this.$dialog.toast({
	                    mes: '请根据提示正确输入',
	                    timeout: 1500
	                });
				}
			},
			getTrailer(){
				let name = 'live'
				if(this.$route.query.kind==2){
					name='live'
				}
				this.$root.ajax({
					name:name,
					type:'get',
					params:{
						id:this.$route.query.id
					}
				}).then((d)=>{
					
					d.data.time = this.$root.getDate(new Date(d.data.start_time*1000),{str:'/',allTime:true})
					
					d.data.liveTime = this.$root.getDate(new Date(d.data.start_time*1000),{str:'-',allTime:true})
					if(this.$route.query.kind==2){
						d.data.newTitle = `【直播录像】${d.data.title}`
						this.mengBanImgStyle={
							background:`url(${d.data.title_img}) no-repeat`,
							backgroundSize:`100% 100%`,
						}
					}else{
						d.data.newTitle = `【直播预告】${d.data.title}`
					}
					this.dataObj = Object.assign({},this.dataObj,d.data)
					
					if(this.$root.isWeiXin()){
						//分享
						let query = '';
						if(this.$root.config.channel){
						 	query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY2FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}FGparamsKey2DYkindFGparamsVal2DY${this.$route.query.kind}`
						}else{
						 	query = `params=oldUrlStrDY${this.$route.name}FGkeyNumDY2FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}FGparamsKey2DYkindFGparamsVal2DY${this.$route.query.kind}`
						}
						this.$root.wxShare({
							d: {title:this.dataObj.newTitle,title_img:this.dataObj.title_img}, //分享对象，题目等
							query:query,//参数
							desc:`主讲老师:${this.dataObj.nick_name}`
						})
					}
				})
			},
			playVideo(){
				this.$nextTick(()=>{
					this.videoHeight = document.getElementById('app').clientHeight+'px'
					this.contentStyle = {
						width: '100%',
							//height: ((contentHight-headerHight-btnHight) / 100 * 2-0.32) + 'rem',
						height: this.videoHeight,
					}
					//this.mineObj
					//this.dataObj
					//非（视频需要会员，且已经开通会员）
					if(this.dataObj.member==1){
						if(this.mineObj.member_status!=1){ 
							//弹出开通会员框
							this.$dialog.confirm({
			                    title: '温馨提示',
			                    mes: '该场直播需要开通会员权限才能观看',
			                    opts: [
			                    	{
			                            txt: '取消',
			                            color: '#999999',
			                            callback: () => {
			                            	
			                      		},
			                    	},
			                        {
			                            txt: '开通会员',
			                            color: '#35BF7E',
			                            callback: () => {
											this.$router.push({
												name:'vipOpen'
											})
			                            }
			                        },
			                    ]
			                });
			                return
						}
					}
					//判断是否需要密码
					this.listObj={};
					if(this.dataObj.password){
						//弹出密码框
						this.showPop=true;
						this.listObj = Object.assign({},this.listObj,this.dataObj)
						this.passwordNum=''
						return
					}
					this.videoPlayFunc()
					//myVideo.setAttribute('height',document.getElementById('app').clientHeight)
				})
			},
			videoPlayFunc(){
				var myVideo=this.$refs.videoRef;
				myVideo.play();
				this.playBtn=false
				this.palyOpen=true
				this.h5VideoFlg=true
			},
			pauseVideo(){
				this.palyOpen=false
			},
			playIngVideo(){
				var myVideo=this.$refs.videoRef;
				myVideo.setAttribute('controls','controls')
				this.palyOpen=true
			},
			getMine(){
				this.$root.ajax({
					name:'my',
					params:{}
				}).then((d)=>{
					this.mineObj=Object.assign({},this.mineObj,d.data)
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './live.scss';
</style>